<template>
	<div class="father">
		<h3>父组件</h3>
		<h4>汽车: {{ car }}</h4>
		<h4 v-show="toy">从子处得到的: {{ toy }}</h4>
		<Child :car="car" :sendToy="getToy" />
	</div>
</template>

<!-- props是使用频率最高的一种通信方式,常用于 父子之间互相传值 -->
<!-- 尽量不用props一层层传递到孙,曾孙组件-->

<script setup lang="ts" name="Father">
import Child from './Child.vue';
import { ref } from 'vue';
let car = ref("比亚迪")
let toy = ref("")

function getToy(value: string) {
	toy.value = value
}
</script>

<style scoped>
.father {
	background-color: rgb(165, 164, 164);
	padding: 20px;
	border-radius: 10px;
}
</style>